<template>
  <div class="list">

    <div class="content-head" style="margin-bottom: 20px;">
      <div class="sort-keys">
        <div class="tab-list">
           <div class="item" @click="keys.type = item.key" :class="{actived: keys.type === item.key}"
             v-for="(item, index) in statusList">
             {{item.text}}
           </div>
         </div>

        <span style="margin-left: 20px; margin-right: 6px;">日期:</span>
        <iDatePicker :showTime="false" style="margin-left: 10px;" placeholder="不选则不限制" v-model="filter.min_day"></iDatePicker>
        至
        <iDatePicker :showTime="false" style="margin-left: 0px;" placeholder="不选则不限制" v-model="filter.max_day"></iDatePicker>


      </div>
    </div>
    <a-table class="table" :rowKey="row => row.uuid" :dataSource="list" :pagination="pagination" :size="size">

      <a-table-column title="标题" width="120px">
        <template slot-scope="row">
          {{row.skus[0].title}}
        </template>
      </a-table-column>

      <a-table-column title="总支付" width="100px">
        <template slot-scope="row">
          <NumberGroupDisplay :info="row" prefix="sum_product_"></NumberGroupDisplay>
        </template>
      </a-table-column>

      <a-table-column title="实际支付" width="100px">
        <template slot-scope="row">
          <NumberGroupDisplay :info="row" prefix="sum_pay_"></NumberGroupDisplay>
        </template>
      </a-table-column>

      <a-table-column title="红包支付" width="100px">
        <template slot-scope="row">
          <NumberGroupDisplay :info="row" prefix="sum_redpack_discount_"></NumberGroupDisplay>
        </template>
      </a-table-column>

      <a-table-column title="积分支付" width="100px">
        <template slot-scope="row">
          {{row.sum_score_discount_money_price}}
        </template>
      </a-table-column>

      <a-table-column title="优惠券支付" width="100px">
        <template slot-scope="row">
          <NumberGroupDisplay :info="row" prefix="sum_coupon_discount_"></NumberGroupDisplay>
        </template>
      </a-table-column>
    </a-table>

  </div>
</template>
<script>
  import moment from 'moment'
  import ISwitch from '@/components/ISwitch/ISwitch'

  import NumberGroupDisplay from './components/NumberGroupDisplay'

  import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"

  const resourceType = 'stats/user-stats'
  const resourceTypeText = '消费统计'

  export default {
    components: {
      ISwitch,
      NumberGroupDisplay,
      IDatePicker
    },
    props: {
      selectMode: {
        type: Boolean
      },
      params: {
        type: Object
      },
      size: {
        type: String,
        default: 'default'
      }
    },
    data() {
      return {
        statusList: [
          {
            text: '福袋',
            key: 'fudai'
          },
          {
            text: '一番赏',
            key: 'yifanshang'
          },
          {
            text: '连击赏',
            key: 'renyi'
          },
          {
            text: '卡牌社',
            key: 'kapaishe'
          },
          {
            text: '冒险岛',
            key: 'maoxian'
          },
          {
            text: '大乱斗',
            key: 'tuanzhan'
          }             
        ],
        keys: {
          type: 'fudai'
        },
        list: [],
        page: 1,
        per_page: 10,
        total: 0,
        filter: {
          min_day: '',
          max_day: ''
        }
      }
    },
    watch: {
      params() {
        this.refreshData()
      },
      keys: {
        handler(value) {
          this.refreshData()
        },
        deep: true
      },
      'filter.min_day'() {
        if(this.filter.min_day && this.filter.max_day){
          this.refreshData()
        }else if(!this.filter.min_day && !this.filter.max_day){
          this.refreshData()
        }
      },
      'filter.max_day'() {
        if(this.filter.min_day && this.filter.max_day){
          this.refreshData()
        }else if(!this.filter.min_day && !this.filter.max_day){
          this.refreshData()
        }
      }
    },
    computed: {
      
    },
    filters: {},
    created() {
      this.fetchData()
    },
    methods: {
      refreshData() {
        this.page = 1
        this.fetchData()
      },
      fetchData() {
        this.isEdit = false
        this.$http.get(`/sell-ranked`, {
          params: {
            ...this.params,
            page: this.page,
            per_page: this.per_page,
            type: this.keys.type,
            sort_by: this.sortBy,
            min_day: this.filter.min_day,
            max_day: this.filter.max_day
          }
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.item_total
        }).finally(() => {
          this.loading = false
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .top-btn {
    background: #1890FF;
    color: white;
    cursor: pointer;
    font-size: 80%;
    border-radius: 4px;
    padding: 2px 6px;

    &.unset {
      border: 1px solid #D8D5D5;
      background: #D8D5D5;
      color: gray;
    }
  }

  .sort-keys {
    display: flex;
    align-items: center;

    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;
      margin-right: 50px;

      .item {
        margin-right: 30px;
        padding: 0px 10px 4px 10px;
        cursor: pointer;
        font-weight: 500;

        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
        }

        &:hover {
          color: #1890FF;
        }
      }
    }

  }

  .content-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .table {
    .thumb {
      height: 60px;
      border-radius: 6px;
    }

    .content-image {
      height: 60px;
      width: 60px;
      margin-right: 10px;
      margin-bottom: 10px;
      object-fit: cover;
      border-radius: 10px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }

    .user {
      display: flex;
      // flex-wrap: wrap;
      align-items: center;

      img {
        width: 26px;
        height: 26px;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
      }

      .gender-man,
      .gender-woman {
        margin-left: 5px;
        font-size: 12px;
      }

      .gender-man {
        color: #409EFF;
      }

      .gender-woman {
        color: #F56C6C;
      }
    }
  }
</style>
